<template>
    <div id="app">
        <div class="headapp">
            <p class="p">电影票</p>
            <p>演出</p>
        </div>
        <div >
            
        </div>
<section v-if="local">



        <div class="movediv"    v-for="mover in Mover" :key="mover.id"  >
    


        
            <div class="movediv-top">
                <p class="topleftp">  
                  <img :src="mover.img" alt="">  
                </p>
               <ul class="toprightul" >
                   <li class="li1"><span>{{mover.name}}</span></li>
                   <li class="li2">{{mover.address}}</li>
                   <li class="li3">{{mover.date}}</li>
               </ul>
            </div>
            <div class="movediv-bottp">
                <p class="bottleftp">共<span>{{mover.number}}</span>张</p>
                <p class="bottrightp"> 查看评价</p>
            </div>


        </div>
</section>  
        <div class="cengterdiv" v-if="!local" >

            <span>
              请先
      
                <router-link to="/Login"> <span>登录</span> </router-link>
     
             
            </span>
        </div>
















        <!-- <div class="movediv">
            <div class="movediv-top">
                <p class="topleftp">
                  <img src="" alt="">  
                </p>
               <ul class="toprightul" >
                   <li class="li1">我是药神</li>
                   <li class="li2">太平洋天堂影城</li>
                   <li class="li3">2012-12-21 21:21</li>
               </ul>
            </div>
            <div class="movediv-bottp">
                <p class="bottleftp">共<span>2</span>张</p>
                <p class="bottrightp"> 查看评价</p>
            </div>


        </div> -->

        <div class="footdiv" v-if="local">
            <p class="topp">没有更多了</p>
            <p class="bottp">由谁谁谁提供购票服务</p>


            
        </div>
 
      


    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Wmovie",
  data() {
    return {
      Mover: [],
      local: localStorage.getItem("name")
    };
  },
  created() {
    // localStorage.getItem("name")

    axios({
      url: "/mover",
      params: {
        // id: "002"
        userid: localStorage.getItem("name")

        //传用户id
      }
    }).then(res => {
      this.Mover = res.data;
      // console.log(res.data)
    });
    // console.log("this.Mover", this.Mover);
  }
};
</script>

<style scoped>
#app {
  flex: 1;
  height: auto;
  overflow: auto;
  background-color: bisque;
}
.headapp {
  height: 0.5rem;
  background-color: #eee;
  display: flex;
  justify-content: space-around;
  line-height: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.headapp p {
  font-size: 0.2rem;
  color: #888;
}
.headapp .p {
  border-bottom: 1px solid red;
  color: #000;
}
.movediv {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0.2rem 0rem;
}
.movediv-top .topleftp {
  height: 1.5rem;
  width: 1rem;
  background-color: hotpink;
  float: left;
  margin: 0.2rem;
  overflow: hidden;
}
.movediv-top img {
  width: 100%;
  height: 100%;
}

.movediv-top .toprightul {
  float: left;
  margin: 0.2rem 0rem;
  width: 60%;
}
.movediv-top .toprightul li {
  height: 0.3rem;
  font-size: 0.15rem;
  line-height: 0.3rem;
  color: #888;
}

.movediv-top .toprightul .li1 {
height:auto;
}

.movediv-top .toprightul .li1 span{
  color: #000;
  overflow: hidden;
  max-height: 0.6rem; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: bolder;
  font-size: 0.18rem;
  line-height: 0.3rem;
}

.movediv-bottp {
  padding-top: 0.1rem;
  margin: 0rem 0.2rem;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px #888 dashed;
}

.movediv-bottp .bottleftp {
  font-size: 0.15rem;
  line-height: 0.4rem;
}
.movediv-bottp .bottleftp span {
  font-size: 0.2rem;
  line-height: 0.4rem;
}
.movediv-bottp .bottrightp {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.15rem;
  padding: 0rem 0.15rem;
  border: 1px solid #888;
  border-radius: 0.3rem;
}

.footdiv {
  height: 1rem;
  width: 100%;
  background-color: #eee;
}
.footdiv .topp {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: #888;
  margin: 0px auto;
  text-align: center;
}

.footdiv .bottp {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.15rem;
  color: #aaa;
  text-align: center;
}

.cengterdiv {
  height: 90%;
  background-color: beige;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cengterdiv span {
  font-size: 0.2rem;
}
</style>
